<template>
	<view class="zai-box">
		<scroll-view scroll-y>
			<view class="loginbox">

				<view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
					<image src="/static/home/128/logo.png" mode='widthFix' class="zai-logo "></image>
					<!-- <view class="zai-title text-shadow ">中捷拍卖1</view> -->
				</view>
				<view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
					<block v-if="loginWay==1">
						<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
							<!-- <view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view> -->
							<input placeholder-class="placeholdercolor" placeholder="请输入账号" name="input"
								v-model="userName"></input>
						</view>
						<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
							<!-- <view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view> -->
							<input placeholder-class="placeholdercolor" class="uni-input" placeholder="请输入密码"
								:password="!showPassword" v-model="password" />
							<view class="action text-lg">
								<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
									@click="changePassword"></text>
							</view>
						</view>
						<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
							<!-- <view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view> -->
							<input placeholder-class="placeholdercolor" placeholder="请输入验证码" name="input"
								v-model="inputCode"></input>
							<image @click="handleChangeCheckCode" class="codeimg" :src="randCodeImage" mode='widthFix'>
							</image>
						</view>
						<view class="flex  margin-top logintop">
							<button type="warn" plain class="cu-btn bg-red lg shadow" @click="gohome">游客</button>
							<button class="cu-btn bg-red margin-left lg shadow" :loading="loading"
								:class="[shape=='round'?'round':'']" @tap="onLogin"><text
									space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
							</button>

						</view>
						<!-- <view class="wanjiZhu">
								<view class="span">忘记密码了？</view>
								<view class="span">注册</view>
							</view> -->
					</block>
					<block v-else>
						<view class="registerBox">
							<view class="border">
								<form>
									<view class="cu-form-group">
										<view class="title">姓名</view>
										<input placeholder="请输入姓名" name="input" v-model="myFormData.realname"></input>
									</view>
									<view class="cu-form-group">
										<view class="title">用户名</view>
										<input placeholder="用户名" name="input" v-model="myFormData.username"
											disabled></input>
									</view>
									<view class="cu-form-group">
										<view class="title">头像</view>
										<view class="grid col-4 grid-square flex-sub">
											<view class="bg-img" v-for="(item,index) in imgList" :key="index"
												@tap="ViewImage" :data-url="imgList[index]">
												<image :src="imgList[index]" mode="aspectFill"></image>
												<view class="cu-tag bg-red radius" @tap.stop="DelImg"
													:data-index="index">
													<text class='cuIcon-close'></text>
												</view>
											</view>
											<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
												<text class='cuIcon-cameraadd'></text>
											</view>
										</view>
									</view>

									<view class="cu-form-group">
										<view class="title">性别</view>
										<switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''"
											:checked="switchC?true:false"></switch>
									</view>

									<view class="cu-form-group">
										<view class="title">手机号码</view>
										<input placeholder="输入手机号码" name="input" v-model="myFormData.phone"></input>
										<view class="cu-capsule radius">
											<view class='cu-tag bg-blue '>
												+86
											</view>
											<view class="cu-tag line-blue">
												中国大陆
											</view>
										</view>
									</view>
									<view class="cu-form-group">
										<view class="title">邮箱</view>
										<input placeholder="输入邮箱" name="input" v-model="myFormData.email"></input>
									</view>
								</form>
								<view class="text-center margin-top">
									<button class="cu-btn bg-blue lg shadow" :loading="loading"
										:class="[shape=='round'?'round':'']" @click="submit"><text
											space="emsp">{{loading ? "新增中...":" 新增 "}}</text>
									</button>
									<button class="cu-btn line-blue lg margin-left shadow" :loading="loading"
										:class="[shape=='round'?'round':'']" @tap="loginWay=1">账户登录
									</button>
								</view>
							</view>


						</view>
						<!-- <view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
				        		<view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view>
				        		<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input>
				        	</view>
				        	<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
				        		<view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view>
				        		<input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/>
				        		<view class="action">
				        			<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button>
				        		</view>
				        	</view> -->

					</block>


					<!-- #ifdef APP-PLUS -->
					<view class="padding flex flex-direction  text-center">
						当前版本:{{version}}
					</view>
					<!-- #endif -->

				</view>

			</view>
		</scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/home/128/homeC.png" mode="aspectFit" class="round">
			</image>
			<view class="gray-text">登录中...</view>
		</view>


	</view>

</template>

<script>
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO,
		USER_STORAGE
	} from "@/common/util/constants"
	import {
		mapActions
	} from "vuex"
	import configService from '@/common/service/config.service.js'
	import server from '@/api/server.js'
	import {
		encryption
	} from '@/common/util/aesEncrypt'
	export default {
		data() {
			return {
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请选择社区',
							},
							{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					placeName: {
						rules: [{
							required: true,
							errorMessage: '请输入名称',
						}, ]

					},

				},
				currdatetime: '',
				randCodeImage: '',
				formData: {},
				switchC: true,
				imgList: [],
				myFormData: {
					avatar: '',
					realname: '',
					username: '',
					sex: 1,
					birthday: '',
					orgCode: '',
					workNo: '',
					phone: '',
					email: '',
					id: '',
				},
				shape: '', //round 圆形
				loading: false,
				userName: '',
				password: '',
				inputCode: '',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version: '',
				//第三方登录相关信息
				thirdType: "",
				thirdLoginInfo: "",
				thirdLoginState: false,
				bindingPhoneModal: false,
				thirdUserUuid: '',
				url: {
					bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
				},
				personalList: {}
			};
		},
		onLoad: function() {
			// #ifdef APP-PLUS
			var that = this
			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				that.version = wgtinfo.version
			});
			// #endif
			this.personalList = uni.getStorageSync(USER_STORAGE)
			console.log('this.personalList', this.personalLists)
			this.userName = this.personalList.userName
			this.password = this.personalList.password
			this.handleChangeCheckCode()
		},
		onShow() {

		},
		computed: {
			// isSendSMSEnable() {
			// 	return this.smsCountDown <= 0 && this.phoneNo.length > 4;
			// },
			// getSendBtnText() {
			// 	if (this.smsCountDown > 0) {
			// 		return this.smsCountDown + '秒后发送';
			// 	} else {
			// 		return '发送验证码';
			// 	}
			// },
		},
		methods: {
			...mapActions(["mLogin", "PhoneLogin", "ThirdLogin"]),
			onLogin: function() {
				if (!this.userName || this.userName.length == 0) {
					this.$tip.toast('请填写用户名');
					return;
				}
				if (!this.password || this.password.length == 0) {
					this.$tip.toast('请填写密码');
					return;
				}
				if (!this.inputCode || this.inputCode.length == 0) {
					this.$tip.toast('请填写验证码');
					return;
				}
				let loginParams = {
					account: this.userName,
					password: this.password,
					captcha: this.inputCode,
					checkKey: this.currdatetime,
					type: 2,

				}
				var that = this
				server.getEncryptedString().then(res => {
					console.log(res)
					let password = encryption(loginParams.password, res.data.result.key, res.data.result.iv)
					loginParams.password = password
					this.loading = true;
					this.mLogin(loginParams).then((res) => {
						this.loading = false;
						if (res.data.success) {
							// #ifdef APP-PLUS
							this.saveClientId()
							// #endif
							// #ifndef APP-PLUS

							var pages = getCurrentPages(); // 当前页面
							var beforePage = pages[pages.length - 2]; // 前一个页面
							console.log(beforePage,
								'beforePagebeforePagebeforePagebeforePagebeforePage')
							if (beforePage != undefined) {
								console.log('123123123123123123')
								var url = beforePage.$page.fullPath;
							} else {
								console.log('dddddddddddddddddddddddddddd')
								var url = beforePage
							}

							if (url == '/pages/common/exit') {
								// this.$Router.replaceAll({
								// 	name: 'index'
								// })
								uni.navigateTo({
									url: '/pages/index/index'
								})
							} else if (url == undefined) {
								console.log('11111111111111111111Jinlaiajlailajaljia')
								this.$Router.replaceAll({
									name: 'index'
								})
							} else if (url != null && url != '') {
								console.log('Jinlaiajlailajaljia')
								if (url == 'pages/index/index') {
									this.$Router.replaceAll({
										name: 'index'
									})
								} else {
									uni.navigateBack({
										// url: url,

									})
								}

							}
							//存储账号密码
							let obj = {
								userName: that.userName,
								password: that.password
							}
							uni.setStorageSync(USER_STORAGE, obj);
							this.$tip.success('登录成功!')
							// #endif
						} else {
							this.handleChangeCheckCode()
							this.$tip.toast(res.data.message);
						}
					}).catch((err) => {
						let msg = err.data.message || "请求出现错误，请稍后再试"
						this.loading = false;
						this.$tip.toast(msg);
					}).finally(() => {
						this.loading = false;
					})
				})
				// let pass=this.$md5(loginParams.password)
				// loginParams.password = pass


			},
			gohome() {
				this.$Router.replaceAll({
					name: 'index'
				})
			},
			onSubmit() {
				let myForm = this.myFormData
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				let checkEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
				console.log("myForm", myForm)
				if (!myForm.phone || myForm.phone.length == 0) {
					this.$tip.alert('请输入手机号');
					return false
				}
				if (!checkPhone.test(myForm.phone)) {
					this.$tip.alert('请输入正确的手机号');
					return false
				}
				if (!checkEmail.test(myForm.email)) {
					this.$tip.alert('请输入正确的邮箱地址');
					return false
				}
				this.myFormData.id = this.$store.getters.userid
				if (this.switchC) {
					this.myFormData.sex = 1
				} else {
					this.myFormData.sex = 2
				}
				console.log('myform', this.myFormData)
				this.$http.put('/sys/user/appEdit', this.myFormData).then(res => {
					console.log(res)
					this.$tip.loaded();
					if (res.data.success) {
						this.$tip.toast('提交成功')
						this.$Router.replace({
							name: 'userdetail'
						})
						/* uni.navigateTo({
							url: '/pages/user/userdetail'
						}) */
					}
				}).catch(() => {
					this.$tip.error('提交失败')
				});
			},
			SwitchC(e) {
				this.switchC = e.detail.value
			},
			saveClientId() {
				var info = plus.push.getClientInfo();
				var cid = info.clientid;
				this.$http.get("/sys/user/saveClientId", {
					params: {
						clientId: cid
					}
				}).then(res => {
					console.log("res::saveClientId>", res)
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({
						name: 'index'
					})
				})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			onSMSSend() {
				let smsParams = {};
				smsParams.mobile = this.phoneNo;
				smsParams.smsmode = "0";
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				if (!smsParams.mobile || smsParams.mobile.length == 0) {
					this.$tip.toast('请输入手机号');
					return false
				}
				if (!checkPhone.test(smsParams.mobile)) {
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.post("/sys/sms", smsParams).then(res => {
					if (res.data.success) {
						this.smsCountDown = 60;
						this.startSMSTimer();
					} else {
						this.smsCountDown = 0;
						this.$tip.toast(res.data.message);
					}
				});
			},
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
					this.smsCountDown--;
					if (this.smsCountDown <= 0) {
						clearInterval(this.smsCountInterval);
					}
				}, 1000);
			},
			onSMSLogin() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);

				if (!this.phoneNo || this.phoneNo.length == 0) {
					this.$tip.toast('请填写手机号');
					return;
				}
				if (!checkPhone.test(this.phoneNo)) {
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				if (!this.smsCode || this.smsCode.length == 0) {
					this.$tip.toast('请填短信验证码');
					return;
				}
				let loginParams = {
					mobile: this.phoneNo,
					captcha: this.smsCode
				};
				this.PhoneLogin(loginParams).then((res) => {
					console.log("res====》", res)
					if (res.data.success) {
						this.$tip.success('登录成功!')
						this.$Router.replaceAll({
							name: 'index'
						})
					} else {
						this.$tip.error(res.data.message);
					}
				}).catch((err) => {
					let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
					this.$tip.error(msg);
				});
			},
			loginSuccess() {
				// 登陆成功，重定向到主页
				this.$Router.replace({
					name: 'index'
				})
			},
			requestFailed(err) {
				this.$message.warning("登录失败")
			},
			/**刷新验证码*/
			handleChangeCheckCode() {
				this.currdatetime = new Date().getTime();
				this.inputCode = ''
				this.$http.get(`/applet/bidder/randomImage/${this.currdatetime}`).then(res => {
					console.log('randomImage', res)
					if (res.data.success) {
						this.randCodeImage = res.data.result
					} else {
						this.$tip.toast(res.data.message);
					}
				});

			},

		},
		beforeDestroy() {
			if (this.smsCountInterval) {
				clearInterval(this.smsCountInterval);
			}
		},

	}
</script>

<style scoped lang="scss">
	.loginbox{
		padding-top: 10%;
	}
	.cu-form-group {
		padding: 0.5px 15px;
		;
	}

	.login-paddingtop {
		padding-top: 100upx;
	}

	.zai-box {
		padding: 0 20upx;
		padding-top: 100upx;
		position: relative;
	}

	.zai-logo {
		width: 200upx;
		height: 150px;
	}

	.zai-title {
		font-size: 58upx;
		color: #000000;
		text-align: center;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}

	.registerBox {
		box-shadow: 1px 1px 13px 0px #ccc;
		background-color: white;
		padding: 10px;
		margin-bottom: 10px;


	}

	/deep/.uni-forms-item__label .label-text {
		font-size: 17px !important;
		color: #333333;
	}

	/deep/.grid.grid-square>.solids {
		margin: 0;
	}

	.cu-form-group {
		padding: 10px 15px;
	}

	.page,
	body {
		background-color: white;
	}

	/deep/uni-page-wrapper {
		background-color: white;
	}

	.zai-box {
		padding: 0;
	}

	.zai-logo {
		width: 165px;
		height: 0;
		margin-top: 60px;
	}

	.cu-form-group uni-input {
		padding-right: 0;
	}

	.cu-form-group {
		text-align: center;
	}

	.text-lg {
		position: absolute;
		right: 14px;
		z-index: 9;
	}

	.placeholdercolor {
		color: #C2C2C2;
	}

	.shadow-warp {
		box-shadow: unset;
		border-bottom: 1px solid #E7E7E7;
	}

	.cu-form-group+.cu-form-group {
		border-top: unset;
	}

	.login-paddingtop {
		padding-top: 38px;
	}

	.logintop {
		margin-top: 40px;

		.cu-btn {
			width: 50%;
		}
	}

	.wanjiZhu {
		display: flex;
		justify-content: space-between;
		padding-top: 20px;
		width: 100%;
		align-items: center;
		color: #C2C2C2;
	}

	.page,
	page,
	.zai-box {
		height: 100%;
		width: 100%;
		display: inline-block;
		background-color: white !important;
	}

	.codeimg {
		width: 100px;
		height: 25px;
	}
</style>
